<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    sort-by="calories"
    class="elevation-1"
  >
    <template v-slot:top>
      <v-toolbar flat>
        <v-toolbar-title>测试用例</v-toolbar-title>
        <v-divider class="mx-4" inset vertical></v-divider>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="500px">
          <template v-slot:activator="{ on, attrs }">
            <v-btn color="primary" dark class="mb-2" v-bind="attrs" v-on="on">
              新增用例
            </v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="text-h5">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field
                      v-model="editedItem.id"
                      label="用例id"
                    ></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field
                      v-model="editedItem.case_title"
                      label="用例标题"
                    ></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field
                      v-model="editedItem.remark"
                      label="备注"
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
              <v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
        <v-dialog v-model="dialogDelete" max-width="500px">
          <v-card>
            <v-card-title class="text-h5">请确认是否永久删除用例?</v-card-title>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="closeDelete"
                >取消</v-btn
              >
              <v-btn color="blue darken-1" text @click="deleteItemConfirm"
                >确认</v-btn
              >
              <v-spacer></v-spacer>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>
    <template v-slot:[`item.actions`]="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
      <v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
    </template>
    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize"> Reset </v-btn>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data: () => ({
    dialog: false,
    dialogDelete: false,
    headers: [
      {
        text: "用例id",
        align: "start",
        sortable: false,
        value: "id",
      },
      { text: "用例标题", value: "case_title" },
      { text: "备注", value: "remark" },
      { text: "操作", value: "actions", sortable: false },
    ],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      id: 0,
      case_title: "",
      remark: "",
    },
    defaultItem: {
      id: 0,
      case_title: "",
      remark: "",
    },
  }),

  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "新增用例" : "修改用例";
    },
  },

  watch: {
    dialog(val) {
      val || this.close();
    },
    dialogDelete(val) {
      val || this.closeDelete();
    },
  },

  created() {
    this.initialize();
  },

  methods: {
    // 初始化的方法
    initialize() {
      // 当页面初始化时，就发起一个测试用例的get请求
      this.$api.testcase
        .getTestcase()
        .then((result) => {
          console.log("getTestcase", result);
          // 提取响应数据，复制给 this.desserts 展示在页面中
          this.desserts = result.data.msg;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    editItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },

    deleteItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialogDelete = true;
    },

    // 删除用例
    deleteItemConfirm() {
      // 要删除的数据
      console.log(this.editedItem);
      // 调用删除接口，传入要删除的id
      this.$api.testcase
        .deleteTestcase({ id: this.editedItem.id })
        .then((result) => {
          console.log("deleteTestcase", result);
          if (result.data.code === 200) {
            this.initialize();
          } else {
            console.log("删除用例失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.closeDelete();
    },

    close() {
      this.dialog = false;
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },

    closeDelete() {
      this.dialogDelete = false;
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },

    // 新增和更新用例
    save() {
      if (this.editedIndex > -1) {
        // 修改用例逻辑
        // 要更新的数据
        console.log(this.editedItem);
        // 调用更新接口，传入要更新的数据
        this.$api.testcase
          .updateTestcase(this.editedItem)
          .then((result) => {
            console.log("updateTestcase", result);
            if (result.data.code === 200) {
              this.initialize();
            } else {
              console.log("更新用例失败");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        // 新增用例逻辑
        // 要更新的数据
        console.log(this.editedItem);
        // 调用更新接口，传入要更新的数据
        this.$api.testcase
          .addTestcase(this.editedItem)
          .then((result) => {
            console.log("addTestcase", result);
            if (result.data.code === 200) {
              this.initialize();
            } else {
              console.log("新增用例失败");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
      this.close();
    },
  },
};
</script>